<template>
	<div class="setup">
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
			<el-form-item label="选择类型：" prop="type">
				<el-select v-model="ruleForm.type" disabled  placeholder="请选择">
					<el-option
					
					v-for="item in typeOptions"
					:key="item.value"
					:label="item.label"
					:value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="店铺名称：" prop="name">
				<el-input  maxlength="20" style="width: 380px" v-model="ruleForm.name" placeholder="结合企业和品牌名称"></el-input>
			</el-form-item>
			<el-form-item label="公司全称：" prop="fullName">
				<el-input style="width: 380px" v-model="ruleForm.fullName" maxlength="20"></el-input>
			</el-form-item>
		

			<el-form-item label="营业执照：" prop="salesAuthorization">
				<UploadFile tip="(三证合一)" :value.sync="ruleForm.salesAuthorization" />
			</el-form-item>
			<el-form-item label="税务登记证：" prop="taxRegistrationCertificate">
				<el-input style="width: 380px" v-model="ruleForm.taxRegistrationCertificate" maxlength="20"></el-input>
			</el-form-item>
			<el-form-item label="组织代码：" prop="organizationCode">
				<el-input style="width: 380px" v-model="ruleForm.organizationCode"  maxlength="40"></el-input>
			</el-form-item>
			<el-form-item label="法人姓名：" prop="juridicalPersonName">
				<el-input style="width: 380px" v-model="ruleForm.juridicalPersonName"  maxlength="20"></el-input>
			</el-form-item>
			<el-form-item label="联系方式：" prop="contacts">
				<el-input style="width: 380px" v-model="ruleForm.contacts" maxlength="11"></el-input>
			</el-form-item>
			<el-form-item label="身份证号：" prop="idNumber">
				<el-input style="width: 380px" v-model="ruleForm.idNumber" maxlength="18"></el-input>
			</el-form-item>
			<div class="id-card">
				<el-form-item label="上传身份证：" prop="cartIdFile.just">
					<div class="flex-y-center">
						<UploadFile tip="正面（需盖公章）" :value.sync="ruleForm.cartIdFile.just" />
					</div>
				</el-form-item>
				<el-form-item label="" prop="cartIdFile.back" label-width="0px">
					<div class="flex-y-center">
						<UploadFile tip="反面（需盖公章）" :value.sync="ruleForm.cartIdFile.back" />
					</div>
				</el-form-item>
			</div>

			<el-form-item label="对公账号：" prop="corporateAccount">
				<el-input style="width: 380px" v-model="ruleForm.corporateAccount"  maxlength="20"></el-input>
			</el-form-item>
			<el-form-item label="开户行：" prop="bankOfDeposit">
				<el-input style="width: 380px" v-model="ruleForm.bankOfDeposit"  maxlength="20"></el-input>
			</el-form-item>
			<el-form-item label="公司地址：" prop="areaAddress">
				<el-cascader
					:popper-append-to-body="false"
					:options="areaList"
					:props="props"
					v-model="ruleForm.areaAddress"
					clearable></el-cascader>
			</el-form-item>

			<el-form-item label="详细地址：" prop="companyAddress">
				<el-input style="width: 380px" v-model="ruleForm.companyAddress" maxlength="50"></el-input>
			</el-form-item>

			<el-form-item>
				<el-button @click="save('ruleForm')" :loading="setupSaveLoading" :disabled="setupOneNextLoading">保存草稿</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')" :disabled="setupSaveLoading" :loading="setupOneNextLoading">下一步</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import UploadFile from '@/components/courtship/UploadFile.vue';
import {validPhone,validIdCart} from '@/utils/validate.js';

export default {
	props: ['areaList','draft','setupSaveLoading','setupOneNextLoading'],
	name: 'SetupOne',
	data() {
		return {
			props:{multiple: false,value: 'cityId',label: 'name',children: 'child'},
			ruleForm: {
				type: '', //0-总，1-门店，2-批发商，3-厂家，4-wms,5-品牌商，6-第三方，7-入驻商
				name: '', //店铺名称
				fullName: '', //公司全称
				salesAuthorization: '', //营业执照(三证合一)
				taxRegistrationCertificate: '', //税务登记证
				organizationCode: '', //组织代码
				juridicalPersonName: '', //法人姓名
				contacts: '', //手机号码
				idNumber: '', //身份证
				cartIdFile: {
					just: '',
					back: '',
				}, //身份证正反面
				corporateAccount: '', //对公账号
				bankOfDeposit: '',//开户行
				areaAddress: '',
				companyAddress: '' //详细地址
			},
			typeOptions:[
				{value: 1, label: '门店'},
				{value: 2, label: '批发商'},
				{value: 3, label: '厂家'},
				{value: 4, label: 'wms'},
				{value: 5, label: '品牌商'},
				{value: 6, label: '第三方'},
				{value: 7, label: '入驻商'},
			],
			rules: {
				name: [
					{ required: true, message: '请输入店铺名称', trigger: 'blur' },
				],
				fullName: [
					{ required: true, message: '请输入公司全称', trigger: 'blur' },
				],
				salesAuthorization: [{ required: true, message: '请传入复印件', trigger: 'blur' }],
				taxRegistrationCertificate: [
					{ required: true, message: '请输入税务登记证', trigger: 'blur' },
				],
				organizationCode: [
					{ required: true, message: '请输入组织代码', trigger: 'blur' },
				],
				juridicalPersonName: [
					{ required: true, message: '请输入法人姓名', trigger: 'blur' },
				],
				contacts: [
					{ required: true, message: '请输入手机号码', trigger: 'blur' },
					{validator: validPhone, trigger: 'blur' }
				],
				idNumber: [
					{ required: true, message: '请输入身份证', trigger: 'blur' },
					{validator: validIdCart, trigger: 'blur' }
				],
				cartIdFile: {
					just: [
						{ required: true, message: '请传入正面身份证照', trigger: 'blur' },
					],
					back: [
						{ required: true, message: '请传入反面身份证照', trigger: 'blur' },
					],
				},
				corporateAccount: [
					{ required: true, message: '请输入对公账号', trigger: 'blur' },
				],
				bankOfDeposit: [
					{ required: true, message: '请填写开户行', trigger: 'blur' },
				],
				companyAddress: [
					{ required: true, message: '请选择地区', trigger: 'blur' },
				],
				companyAddress: [
					{ required: true, message: '请输入详细地址', trigger: 'blur' },
				],
			}
		}
	},
	mounted(){
		const data = {...this.draft};
		if(data.provinceId && data.districtId && data.cityId){
			data.areaAddress = [data.provinceId,data.cityId,data.districtId]
		}
		data.cartIdFile = {};
		data.cartIdFile.just = data.frontImg;
		data.cartIdFile.back = data.reverseImg;
		this.ruleForm =Object.assign(this.ruleForm,data);
		this.ruleForm.type = 7;
	},
	components: {
		UploadFile,
	},
	methods: {
		submitForm(dom) {
			this.$refs[dom].validate(async (valid) => {
				if (valid) {
					await this.saveData(1);
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		// 0 表示保存草稿  1表示下一步
		async saveData(setup) {
			const params = {...this.ruleForm};
			params.frontImg = this.ruleForm.cartIdFile.just;
			params.reverseImg = this.ruleForm.cartIdFile.back;
			delete params.areaAddress;
			delete params.cartIdFile;
			if(this.ruleForm.areaAddress.length === 3){
				params.provinceId = this.ruleForm.areaAddress[0];
				params.cityId = this.ruleForm.areaAddress[1];
				params.districtId = this.ruleForm.areaAddress[2];
			}
			this.$emit('saveFile',{params,setup});
		},
		async save(){
			this.saveData(0);
		}
	}
}
</script>

<style lang="scss" scoped>
.company-address {
	span {
		font-size: 14px;
		color: #606266;
		padding: 0 10px;
	}
}

.id-card{
	display: flex;
	align-items: center;
}
</style>